<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <ul>
      <li>声明式渲染 <button @click="toggle">切换</button>
        <div :class="isShow?'bg1':'bg2'" >
            <p>{{title}}</p>
            <p>{{age +2}}</p>
        </div>
        <ol>
          <li v-for="a in authors" :key="a">
            {{a}}
          </li>
        </ol>
        <div>
           <input type="text" v-model="title" /><br>
           <select v-model="selected">
              <option>请选择</option>
              <option v-for="a in authors" :key="a">{{a}}</option>
           </select>
            选中:{{selected}}<br>
            密码:<input type="text" v-model="psd"><br>
            <button @click="submit">提交</button>
        </div>
      </li>
    </ul>
    <a href="#/list">列表页面</a>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      title: "渲染字符串",
      age: 20,
      isShow: false,
      authors:[
        'Admin','Test','Mark','Jack','Tom'
      ],
      selected:'Mark'
    };
  },
  methods:{
    toggle(){
      this.isShow = !this.isShow;
      alert('切换样式');
    },
    submit(){
      //对model验证 
      //非空
      if(this.title == ""){
        alert("标题不能为空")
      }
      if(this.selected == "请选择"){
        alert("请选择一项")
      }
    }

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.bg1 {
  background-color: firebrick;
}
.bg2 {
  background-color: #ffffff;
}
</style>
